﻿<UserControl x:Class="SampleApp.Samples.MapView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="600" d:DesignWidth="800"
             xmlns:mapSampleApp="clr-namespace:SampleApp"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             xmlns:toms="urn:TomsToolbox"
             xmlns:samples="clr-namespace:SampleApp.Samples"
             xmlns:map="clr-namespace:SampleApp.Map"
             d:DataContext="{d:DesignInstance samples:MapViewModel}">
  <DockPanel>
    <ListBox DockPanel.Dock="Right" Width="200" ItemsSource="{Binding Pois}"
             SelectedItem="{Binding SelectedPoi}" SelectedIndex="1">
      <ListBox.ItemTemplate>
        <DataTemplate DataType="{x:Type map:Poi}">
          <toms:InPlaceEdit Text="{Binding Description}" Focusable="False" />
        </DataTemplate>
      </ListBox.ItemTemplate>
    </ListBox>
    <Grid x:Name="Root">
      <toms:Map x:Name="MapControl" ImageProvider="{Binding ImageProvider}" ZoomLevel="10"
                Center="{Binding Center, Converter={toms:Import toms:CoordinatesToPointConverter}}"
                MousePosition="{Binding MousePosition, Converter={toms:Import toms:CoordinatesToPointConverter}}"
                Bounds="{Binding Bounds}"
                MouseDoubleClickCommand="{Binding MouseDoubleClickCommand}">
        <i:Interaction.Behaviors>
          <toms:MapPanBehavior />
          <toms:MapZoomBehavior />
        </i:Interaction.Behaviors>
        <Grid>
          <ItemsControl ItemsSource="{Binding Pois}" Focusable="False">
            <ItemsControl.ItemsPanel>
              <ItemsPanelTemplate>
                <toms:ViewportCanvas World="{Binding Path=World, ElementName=MapControl}" />
              </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemContainerStyle>
              <Style TargetType="ContentPresenter">
                <Setter Property="toms:CanvasAnchor.BottomLeft" Value="{Binding Coordinates, Converter={toms:Import toms:CoordinatesToPointConverter}}" />
              </Style>
            </ItemsControl.ItemContainerStyle>
            <ItemsControl.ItemTemplate>
              <DataTemplate>
                <Image Source="../Map/map-pin.png" Height="32" Stretch="Uniform" />
              </DataTemplate>
            </ItemsControl.ItemTemplate>
          </ItemsControl>
          <toms:ViewportCanvas World="{Binding Path=World, ElementName=MapControl}">
            <Border x:Name="SelectionBorder" BorderBrush="Red" BorderThickness="2" />
            <i:Interaction.Behaviors>
              <toms:SelectionRectangleBehavior x:Name="Selection" Viewport="{Binding ElementName=MapControl}"
                                               TargetElement="{Binding ElementName=SelectionBorder}"
                                               Selection="{Binding Selection}" />
            </i:Interaction.Behaviors>
          </toms:ViewportCanvas>
        </Grid>
      </toms:Map>
      <Grid HorizontalAlignment="Right" VerticalAlignment="Top" Margin="10" Background="#AAFFFFFF">
        <StackPanel Width="200" Margin="10">
          <ComboBox ItemsSource="{Binding MapSources}" SelectedItem="{Binding ImageProvider}" DisplayMemberPath="Id" />
          <Decorator Height="10" />
          <TextBlock Text="ZoomFactor:" />
          <TextBlock Text="{Binding ElementName=MapControl, Path=ZoomFactor}" />
          <Decorator Height="10" />
          <TextBlock Text="Center:" />
          <TextBlock Text="{Binding Path=Center}" />
          <Decorator Height="10" />
          <TextBlock Text="Mouse:" />
          <TextBlock Text="{Binding Path=MousePosition}" />
        </StackPanel>
      </Grid>
      <Grid HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="10" Background="#AAFFFFFF">
        <Button Content="Clear Selection" Padding="5,2" Margin="10" Command="{Binding ClearSelectionCommand}" />
      </Grid>
    </Grid>
  </DockPanel>
</UserControl>